import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './Item.css'
export default class Item extends Component {
  // 修改数据状态的函数
  updateHandle = () => {
    // 拿到点击的这一条数据的id
    const {
      todo: { id },
    } = this.props
    // 想办法把id传给App
    PubSub.publish('update', id)
  }
  // 删除一条任务数据
  delHandle = () => {
    const {
      todo: { id },
    } = this.props
    // 想办法把id传给App
    PubSub.publish('delete', id)
  }
  render() {
    // const { todoName } = this.props.todo
    // 先解构props里面的todo,然后直接在后面结构todo里面的todoName
    const {
      todo: { todoName, isDone },
    } = this.props

    return (
      <li>
        <label>
          {/* 需求: 点击复选框,修改这个复选框所对应的数据的isDone */}
          <input
            type="checkbox"
            checked={isDone}
            onChange={this.updateHandle}
          />
          <span className={isDone ? 'active' : ''}>{todoName}</span>
        </label>
        <button className="btn btn-danger" onClick={this.delHandle}>
          删除
        </button>
      </li>
    )
  }
}
